<template>
  <div class="teacherIndex">
    <teaheaded />
    <div class="box">
      <div class="bbox">
        <div class="leftBox">
          <div class="navbar">
            <router-link to="/teacher">学生管理</router-link>
          </div>
          <div class="navbar">
            <router-link to="/teacher/course">课程管理</router-link>
          </div>
          <!-- <div class="navbar">
            <router-link to="/teacher/work">发布作业</router-link>
          </div> -->
        </div>
        <div class="rightBox">
          <!-- <div>已发布课程</div> -->
          <el-table
            :data="
              techercourse.filter(
                (data) =>
                  !search ||
                  data.name.toLowerCase().includes(search.toLowerCase())
              )
            "
            style="width: 100%"
          >
            <el-table-column
              label="学生id"
              prop="user_detail_id"
            ></el-table-column>
            <el-table-column label="课程id" prop="type_id"></el-table-column>
            <el-table-column label="课程标题" prop="tctitle"></el-table-column>
            <el-table-column
              label="课程收藏数"
              prop="tcsignup_number"
            ></el-table-column>
            <el-table-column label="图片" prop="tcimg"></el-table-column>
            <el-table-column label="等级" prop="tctype"></el-table-column>

            <el-table-column align="right">
              <template slot="header" slot-scope="{}">
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"
                />
              </template>
              <template slot-scope="scope">
                <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-button class="addcourse" type="text" @click="addcourse"
            >发布课程</el-button
          >
          <el-form ref="form" :model="form" label-width="80px" class="form">
            <el-form-item label="学生id">
              <el-input v-model="form.user_detail_id"></el-input>
            </el-form-item>
            <el-form-item label="课程id">
              <el-input v-model="form.type_id"></el-input>
            </el-form-item>
            <el-form-item label="课程标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="课程收藏数">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="等级">
              <el-input v-model="form.title"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form> -->
        </div>
      </div>
      <!-- <el-tabs :tab-position="tabPosition" style="height: 665px">
        <el-tab-pane label="学生管理" class="student">
          <button class="addStudent">添加学生</button>
          <button class="clear"></button>
          <div class="sbox">
            <div class="left">
              <a href="">所有学生</a>
              <a href="">网络1891</a>
              <button class="addClass">新建班级</button>
            </div>
            <div class="right">
              <el-table :data="tableData" border style="width: 95%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="课程管理">课程管理</el-tab-pane>
        <el-tab-pane label="作业考试">作业考试</el-tab-pane>
      </el-tabs> -->
      <!-- <div class="head">
        <div class="msgBox">
          <div class="left">
            <div class="imgBox">
              <img src="@/assets/images/6.jpg" alt="" />
            </div>
          </div>
          <div class="right">
            <p>您好，<span>xxx</span></p>
            <p>工号：<span>xxx</span></p>
            <p>
              <a href="">修改个人资料</a>
            </p>
          </div>
        </div>
        <div class="clear"></div>
      </div> -->
      <!-- <div class="center">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="nav-box">
          <el-tab-pane label="学生管理" name="first" class="student">
            <button class="addStudent">添加学生</button>
          </el-tab-pane>
          <el-tab-pane label="课程管理" name="second">课程管理</el-tab-pane>
          <el-tab-pane label="作业考试" name="third">作业考试</el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="学生管理" name="first" class="student">
            <button class="addStudent">添加学生</button>
            <button class="clear"></button>
            <div class="sbox">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="已入班" name="first"
                  >用户管理</el-tab-pane
                >
                <el-tab-pane label="配置管理" name="second"
                  >配置管理</el-tab-pane
                >
                <el-tab-pane label="角色管理" name="third"
                  >角色管理</el-tab-pane
                >
                <el-tab-pane label="定时任务补偿" name="fourth"
                  >定时任务补偿</el-tab-pane
                >
              </el-tabs>
            </div>
          </el-tab-pane>
          <el-tab-pane label="课程管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="作业考试" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //   activeName: "first",
      tabPosition: "left",
      techercourse: [],
      techerdata: JSON.parse(sessionStorage.getItem("teacherData")),
      flag: true,
      form: {},
      search:'',
    };
  },
  methods: {
    // //课程编辑事件
    // handleEdit(index, row) {
    //   console.log(index, row);
    // },
    // 课程删除事件
    handleDelete(index, row) {
      //删除掉数据库数据  然后再进行前端页面的移除
      console.log(row.teachercoure_id);
      this.$http.post("http://test.com:3000/teacher/deltechercourse", {
        courseid: row.teachercoure_id,
      });
      this.techercourse.splice(index, 1);
    },
    // 课程添加
    //  ueseid: ueseid,
    // typeid: typeid,
    // title: title,
    // signup: signup,
    // img: img,
    // type: type,
    // teacherid: teacherid,
    addcourse() {},
    onSubmit() {
      console.log("submit!");
    },
  },
  mounted() {
    //课堂
    this.$http
      .post("http://test.com:3000/teacher/techercourse", {
        jobId: this.techerdata.jobId,
      })
      .then((res) => {
        this.techercourse = res.data;
        console.log(this.techercourse);
      });
  },
};
</script>
<style lang="less">
.box {
  width: 100vw;
  height: 91vh;
  margin-top: 65px;
  padding-top: 20px;
  background-color: #f7f7f7;

  & .bbox {
    width: 80%;
    margin: 0 auto;

    // border: 1px solid red;
    & .leftBox {
      width: 150px;
      height: 83vh;
      border: 1px solid #e3e3e3;
      float: left;
      background-color: #fff;
      padding-top: 10px;

      .navbar {
        height: 60px;
        line-height: 60px;

        a {
          font-size: 1.4rem;
          font-weight: bold;
        }
      }
    }

    & .rightBox {
      margin-left: 180px;
      height: 83vh;
      border-radius: 20px;
      background-color: #fff;

      & .addStudent {
        float: left;
        width: 80px;
        height: 30px;
        background-color: #409eff;
        color: white;
        border-radius: 10px;
        border: #409eff;
        cursor: pointer;
        margin-left: 20px;
        margin-top: 20px;
      }

      & .addcourse {
        float: left;
        width: 80px;
        height: 30px;
        line-height: 8px;
        background-color: #409eff;
        color: white;
        border-radius: 10px;
        border: #409eff;
        cursor: pointer;
        margin-left: 20px;
        margin-top: 20px;
      }
    }
  }

  & .head {
    width: 1200px;
    height: 250px;
    border: 1px solid rgba(128, 128, 128, 0.185);
    margin: 0 auto;
    background-color: #fff;
  }

  & .msgBox {
    width: 28%;
    height: 250px;
    border-right: 1px solid rgba(128, 128, 128, 0.185);

    & .left {
      float: left;
      height: 250px;
      text-align: center;
      line-height: 350px;

      & .imgBox {
        width: 130px;
        height: 130px;

        & img {
          width: 100%;
          border-radius: 50%;
          margin-left: 30px;
        }
      }
    }

    .right {
      height: 250px;
      padding-top: 75px;
      margin-right: 50px;

      p {
        font-size: 1.3rem;
        margin-bottom: 10px;
        font-weight: bold;

        a {
          color: #409eff;
        }
      }
    }
  }

  & .el-tabs {
    width: 80%;
    margin: 0 auto;

    & .el-tabs__nav-scroll {
      width: 150px;
      background-color: #fff;

      & .el-tabs__item {
        height: 60px;
        line-height: 60px;
        font-size: 1.3rem;
        text-align: center;
      }
    }

    & .el-tabs__content {
      background-color: #fff;
      width: 85%;
      height: 97%;
      border-radius: 20px;
      border: 1px solid #e3e3e3;
      left: 15px;

      & .student {
        & .addStudent {
          float: left;
          width: 80px;
          height: 30px;
          background-color: #409eff;
          color: white;
          border-radius: 10px;
          border: #409eff;
          cursor: pointer;
          margin-left: 20px;
          margin-top: 20px;
        }
      }
    }
  }

  & .form {
    width: 800px;
    height: 800px;
    margin-top: 60px;
    border: 1px solid red;

    .el-form-item__content {
      height: 0;
    }

    & input {
      float: left;
      width: 300px;
    }
  }
}
</style>